Markdown渲染引擎換成 markdown-it

發表於 | 分類於

更換渲染引擎

Hexo 預設的 markdown 渲染引擎是 marked，並使用 hexo-renderer-marked 此 Hexo 外掛來將 Markdown 轉換成靜態檔案 HTML，但因前面提到的需求，所以要刪除原本的渲染引擎

1
npm uninstall hexo-renderer-marked --save

安裝我們要改用的 Markdown 渲染引擎：markdown-it，而使用此渲染引擎的 Hexo 外掛就是 hexo-renderer-markdown-it，所以要在 hexo 的專案中安裝此外掛：

1
npm install markdown-it --save

使用hexo-markdown-it導致文章目錄失效的解決方案

只需使用一個插件markdown-it-named-headings

1
npm install markdown-it-named-headings --save

然後添加一行以使用此插件呈現它

1
parser.use(require('markdown-it-named-headings'))

再node_modules/hexo-renderer-markdown-it/lib/renderer.js添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'use strict';

module.exports = function (data, options) {
  var MdIt = require('markdown-it');
  var cfg = this.config.markdown;
  var opt = (cfg) ? cfg : 'default';
  var parser = (opt === 'default' || opt === 'commonmark' || opt === 'zero') ?
    new MdIt(opt) :
    new MdIt(opt.render);
  // 在這加入
  parser.use(require('markdown-it-named-headings'))
  
  if (opt.plugins) {
    parser = opt.plugins.reduce(function (parser, pugs) {
      return parser.use(require(pugs));
    }, parser);
  }

  if (opt.anchors) {
    parser = parser.use(require('./anchors'), opt.anchors);
  }

  return parser.render(data.text);
};

修改文章目錄直接展開

到themes/next/source/css/_common/components/sidebar/sidebar-toc.styl收尋nav-child

1
2
3
4
// 原本
.post-toc .nav .nav-child { display: none; }
// 修改為
.post-toc .nav .nav-child { display: block; }

參考資料

markdown-it 中文文档 將 Hexo 的 Markdown 渲染引擎換成 markdown-it hexo-renderer-markdown-it Issues-文章目錄失效 使用hexo-markdown-it导致文章目录失效的解决方案 hexo-theme-next